<template>
  <div>
    <el-card>
      <div class="title">
        <el-row :gutter="20">
          <el-col :span="4">
            <el-input @clear="clear"  clearable v-model="orderList.cluster" placeholder="请输入用户ID/昵称"></el-input>
          </el-col>
          <el-col :span="4">

            <el-input type="date"  @clear="clear"  clearable v-model="orderList.fetchtimeStart" placeholder="请输入开始时间"></el-input>
          </el-col>
    	  <el-col :span="4">
    	    <el-input type="date"  @clear="clear"  clearable v-model="orderList.fetchtimeStop" placeholder="请输入结束时间"></el-input>
    	  </el-col>
    	  <el-col :span="4">
    	    <div style="margin-top: 1px;">
    	      <el-select @clear="search" slot="prepend" clearable v-model="orderList.fetchtypeno" placeholder="请选择">
		<el-option label="不限方式" selected value="-1"></el-option>
		<el-option label="答题" value="0"></el-option>
		<el-option label="签到" value="1"></el-option>
		<el-option label="兑换" value="2"></el-option>
    	      </el-select>
    	    </div>
    	  </el-col>
          <el-col :span="2">
            <el-button type="primary" @click="search">搜索</el-button>
          </el-col>
        </el-row>
      </div>
    </el-card>
    <!-- 积分列表 -->
    <el-card>
      <div>积分记录列表</div>
      <el-divider></el-divider>
      <!-- 列表 -->
        <el-table @sort-change='sortid' :header-cell-style="{background:'#eef1f6',color:'#606266'}"  :data="pointFetchedLogs" style="width: 100%" border>
	  <el-table-column  sortable="custom" prop="fetchtime" label="时间" width="220"></el-table-column>
          <el-table-column prop="utilizer.id" label="用户ID" width="220"></el-table-column>
          <el-table-column prop="utilizer.nickname" label="昵称" width="220"></el-table-column>
          <el-table-column prop="fetchtype" label="方式" width="220"></el-table-column>
	  <!-- <el-table-column prop="point" label="数值" width="220"> -->
		 <el-table-column prop="point" label="数值" width="220">
		   <template slot-scope="scope">
		   	 <el-tag>{{scope.row.fetchtype =='兑换'?''+scope.row.point:'+'+scope.row.point}}</el-tag>
		   </template>
		 </el-table-column>
	  <!-- </el-table-column> -->
        </el-table>
        <!-- 分页 -->
        <br /><br />
        <p style="">共计{{sum}}条记录</p>
        <paging-query style="margin: -55px 0px 0px 300px;" :pages="pages" :total="sum" @currentPage="currentPage"></paging-query>
    </el-card>
  </div>
</template>

<script>
import pagingQuery from "../components/pagination";
import { getPointFetchedLogs, getPointFetchedLogSum } from "../api/index";
export default {
  components: {
    pagingQuery
  },
  data() {
    return {
      pages: {
        page: 1,
        count: 7
      },
      sum: 0,
      // 数据
      orderList: {
        cluster: "",
        fetchtimeStart: "",
        fetchtimeStop: "",
        sortingKey: "",
      	fetchtypeno:"-1",
      	sortingDirection:false
      },
      pointFetchedLogs: []
    };
  },
  created() {
    this.getAorderController();
    this.getOrdercheckList();
  },
  methods: {
    //排序
    async sortid(colum,prop,order){
      //column：当前列;  prop：当前列需要排序的数据; order：排序的规则（升序、降序和默认[默认就是没排序]）
      //上升ascending==false;   下降descending==true;   没有null;
      console.log(colum.prop)
      if(colum.prop=="fetchtime"){
        //时间
        this.orderList.sortingKey="pointFetchedLogFetchtime";
        if(colum.order=="ascending"){
          this.orderList.sortingDirection=false
          }else if(colum.order=="descending"){
            this.orderList.sortingDirection=true
          }else{
            this.orderList.sortingKey=""
            this.orderList.sortingDirection=false
          }
      }
      this.getOrdercheckList()
    },
    // 获取总数
    async getAorderController() {
      const res = await getPointFetchedLogSum({...this.orderList});
      this.sum = res.data.sum;
    },
    // 获取列表
    async getOrdercheckList() {
      const res = await getPointFetchedLogs({ ...this.orderList, ...this.pages });
      if (res.code !== 200)return this.$message.error("获取列表失败,请稍后重试");
      this.pointFetchedLogs = res.data.pointFetchedLogs;
      console.log(this.pointFetchedLogs)
    },
    // 分页
    currentPage(newPage) {
      this.pages.page = newPage;
      this.getOrdercheckList();
    },
    // 搜索
    search() {
	    console.log(this.orderList.fetchtimeStart)
	    console.log(this.orderList.fetchtimeStop)
      this.getOrdercheckList()
      this.getAorderController()
    },
    // 清除
    clear(){
      this.getOrdercheckList()
    }
  }
};
</script>

<style lang="less" scoped>
.el-card {
  margin-bottom: 20px;
  padding-bottom: 20px;
}
</style>
